<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>忘记密码 - 1024导航</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        accent: '#F59E0B',
                        dark: '#1F2937',
                        light: '#F9FAFB'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-gradient {
                @apply bg-clip-text text-transparent bg-gradient-to-r from-primary to-secondary;
            }
            .input-focus {
                @apply focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary;
            }
        }
    </style>
</head>

<body class="bg-gray-50 font-sans text-gray-800 min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="sticky top-0 z-50 bg-white shadow-sm transition-all duration-300">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <div class="text-primary text-2xl font-bold">1024<span class="text-secondary">导航</span></div>
                <span class="hidden md:inline-block text-sm text-gray-500 bg-gray-100 px-2 py-1 rounded">v2.3</span>
            </div>

            <nav class="hidden md:flex items-center space-x-6">
                <a href="index.html" class="text-gray-600 hover:text-primary transition-colors">首页</a>
                <a href="resources.html" class="text-gray-600 hover:text-primary transition-colors">资源</a>
                <a href="tools.html" class="text-gray-600 hover:text-primary transition-colors">工具</a>
                <a href="community.html" class="text-gray-600 hover:text-primary transition-colors">社区</a>
                <a href="about.html" class="text-gray-600 hover:text-primary transition-colors">关于</a>
            </nav>

            <div class="flex items-center space-x-3">
                <button
                    class="hidden md:block px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors">
                    <i class="fa fa-user-plus mr-1"></i> 登录
                </button>
                <button class="md:hidden text-gray-600 text-xl">
                    <i class="fa fa-bars"></i>
                </button>
            </div>
        </div>
    </header>

    <!-- 主要内容区 -->
    <main class="flex-grow py-12">
        <div class="container mx-auto px-4">
            <div class="max-w-md mx-auto">
                <div class="text-center mb-8">
                    <h1 class="text-[clamp(1.5rem,3vw,2rem)] font-bold mb-2 text-gradient">忘记密码</h1>
                    <p class="text-gray-600">请输入您的注册邮箱，我们将发送重置密码的链接</p>
                </div>

                <div class="bg-white rounded-xl shadow-sm p-6 md:p-8">
                    <!-- 步骤指示器 -->
                    <div class="flex justify-between items-center mb-8">
                        <div class="flex flex-col items-center">
                            <div
                                class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center mb-2">
                                <i class="fa fa-envelope-o"></i>
                            </div>
                            <span class="text-xs text-primary font-medium">验证邮箱</span>
                        </div>
                        <div class="flex-1 h-1 mx-2 bg-gray-200">
                            <div class="h-full w-0 bg-primary transition-all duration-500" id="progressBar"></div>
                        </div>
                        <div class="flex flex-col items-center">
                            <div
                                class="w-8 h-8 rounded-full bg-gray-200 text-gray-500 flex items-center justify-center mb-2">
                                <i class="fa fa-key"></i>
                            </div>
                            <span class="text-xs text-gray-500">重置密码</span>
                        </div>
                    </div>

                    <!-- 邮箱验证表单 -->
                    <form id="emailForm" class="space-y-4">
                        <div>
                            <label for="email" class="block text-sm font-medium text-gray-700 mb-1">注册邮箱</label>
                            <div class="relative">
                                <div
                                    class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
                                    <i class="fa fa-envelope"></i>
                                </div>
                                <input type="email" id="email"
                                    class="w-full pl-10 px-4 py-2.5 border border-gray-300 rounded-md input-focus"
                                    placeholder="请输入您的邮箱地址" required>
                            </div>
                            <p class="mt-1 text-xs text-gray-500">我们将发送重置链接到该邮箱</p>
                        </div>

                        <button type="submit"
                            class="w-full py-2.5 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors font-medium">
                            发送重置链接
                        </button>
                    </form>

                    <!-- 验证码表单 (默认隐藏) -->
                    <form id="codeForm" class="space-y-4 hidden">
                        <div>
                            <label for="verificationCode"
                                class="block text-sm font-medium text-gray-700 mb-1">验证码</label>
                            <div class="flex gap-2">
                                <div class="relative flex-1">
                                    <div
                                        class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
                                        <i class="fa fa-shield"></i>
                                    </div>
                                    <input type="text" id="verificationCode"
                                        class="w-full pl-10 px-4 py-2.5 border border-gray-300 rounded-md input-focus"
                                        placeholder="请输入验证码" required>
                                </div>
                                <button type="button" id="resendCode"
                                    class="whitespace-nowrap px-4 py-2.5 border border-primary text-primary rounded-md hover:bg-primary/5 transition-colors text-sm">
                                    重新发送
                                </button>
                            </div>
                            <p class="mt-1 text-xs text-gray-500" id="countdown">验证码已发送至 <span
                                    id="emailDisplay"></span>，59秒后可重新发送</p>
                        </div>

                        <div class="flex gap-2">
                            <button type="button" id="backToEmail"
                                class="flex-1 py-2.5 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 transition-colors">
                                返回
                            </button>
                            <button type="submit"
                                class="flex-1 py-2.5 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors font-medium">
                                验证并重置
                            </button>
                        </div>
                    </form>

                    <!-- 重置密码表单 (默认隐藏) -->
                    <form id="resetForm" class="space-y-4 hidden">
                        <div>
                            <label for="newPassword" class="block text-sm font-medium text-gray-700 mb-1">新密码</label>
                            <div class="relative">
                                <div
                                    class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
                                    <i class="fa fa-lock"></i>
                                </div>
                                <input type="password" id="newPassword"
                                    class="w-full pl-10 px-4 py-2.5 border border-gray-300 rounded-md input-focus"
                                    placeholder="请设置新密码" required>
                                <button type="button"
                                    class="toggle-password absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400"
                                    data-target="newPassword">
                                    <i class="fa fa-eye-slash"></i>
                                </button>
                            </div>
                            <p class="mt-1 text-xs text-gray-500">密码长度至少8位，包含字母和数字</p>
                        </div>

                        <div>
                            <label for="confirmPassword"
                                class="block text-sm font-medium text-gray-700 mb-1">确认新密码</label>
                            <div class="relative">
                                <div
                                    class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
                                    <i class="fa fa-lock"></i>
                                </div>
                                <input type="password" id="confirmPassword"
                                    class="w-full pl-10 px-4 py-2.5 border border-gray-300 rounded-md input-focus"
                                    placeholder="请再次输入新密码" required>
                                <button type="button"
                                    class="toggle-password absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400"
                                    data-target="confirmPassword">
                                    <i class="fa fa-eye-slash"></i>
                                </button>
                            </div>
                            <p class="mt-1 text-xs text-gray-500" id="passwordMatchMsg"></p>
                        </div>

                        <div class="flex gap-2">
                            <button type="button" id="backToCode"
                                class="flex-1 py-2.5 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 transition-colors">
                                返回
                            </button>
                            <button type="submit"
                                class="flex-1 py-2.5 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors font-medium">
                                确认重置
                            </button>
                        </div>
                    </form>

                    <!-- 重置成功提示 (默认隐藏) -->
                    <div id="successMessage" class="text-center py-6 hidden">
                        <div
                            class="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center text-green-500 mx-auto mb-4">
                            <i class="fa fa-check text-2xl"></i>
                        </div>
                        <h3 class="font-semibold text-gray-800 mb-2">密码重置成功！</h3>
                        <p class="text-gray-600 text-sm mb-6">您的密码已成功更新，请使用新密码登录</p>
                        <a href="#"
                            class="inline-block w-full py-2.5 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors font-medium">
                            前往登录
                        </a>
                    </div>
                </div>

                <div class="text-center mt-6 text-sm text-gray-600">
                    <a href="#" class="text-primary hover:underline">返回登录</a>
                    <span class="mx-2">|</span>
                    <a href="about.html" class="text-gray-600 hover:text-primary">联系客服</a>
                </div>
            </div>
        </div>
    </main>

    <!-- 底部区域 -->
    <footer class="bg-gray-800 text-gray-300 py-10 mt-auto">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-white text-lg font-semibold mb-4">1024导航</h3>
                    <p class="text-sm text-gray-400 mb-4">精选互联网优质资源，打造高效便捷的导航平台，助力你的工作与学习。</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-github text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-twitter text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-weixin text-xl"></i>
                        </a>
                    </div>
                </div>

                <div>
                    <h3 class="text-white font-medium mb-4">快速链接</h3>
                    <ul class="space-y-2 text-sm">
                        <li><a href="index.html" class="text-gray-400 hover:text-white transition-colors">首页</a></li>
                        <li><a href="resources.html" class="text-gray-400 hover:text-white transition-colors">资源分类</a>
                        </li>
                        <li><a href="tools.html" class="text-gray-400 hover:text-white transition-colors">实用工具</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">最新收录</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">热门推荐</a></li>
                    </ul>
                </div>

                <div>
                    <h3 class="text-white font-medium mb-4">帮助支持</h3>
                    <ul class="space-y-2 text-sm">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">使用指南</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">资源提交</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">常见问题</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">联系我们</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">举报不良信息</a></li>
                    </ul>
                </div>

                <div>
                    <h3 class="text-white font-medium mb-4">关于我们</h3>
                    <ul class="space-y-2 text-sm">
                        <li><a href="about.html" class="text-gray-400 hover:text-white transition-colors">网站介绍</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">隐私政策</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">使用条款</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">免责声明</a></li>
                    </ul>
                </div>
            </div>

            <div class="border-t border-gray-700 mt-8 pt-6 text-center text-sm text-gray-500">
                <p>© 2023 1024导航. 本站资源仅供学习交流使用，如有侵权请联系删除。</p>
            </div>
        </div>
    </footer>

    <script>
        // 表单切换逻辑
        const emailForm = document.getElementById('emailForm');
        const codeForm = document.getElementById('codeForm');
        const resetForm = document.getElementById('resetForm');
        const successMessage = document.getElementById('successMessage');
        const progressBar = document.getElementById('progressBar');
        const emailDisplay = document.getElementById('emailDisplay');
        const backToEmail = document.getElementById('backToEmail');
        const backToCode = document.getElementById('backToCode');
        const resendCode = document.getElementById('resendCode');
        const countdownEl = document.getElementById('countdown');
        const passwordInputs = {
            new: document.getElementById('newPassword'),
            confirm: document.getElementById('confirmPassword')
        };
        const passwordMatchMsg = document.getElementById('passwordMatchMsg');
        const togglePasswordBtns = document.querySelectorAll('.toggle-password');

        // 邮箱表单提交
        emailForm.addEventListener('submit', function (e) {
            e.preventDefault();
            const email = document.getElementById('email').value;
            emailDisplay.textContent = email;

            // 模拟发送验证码
            emailForm.classList.add('hidden');
            codeForm.classList.remove('hidden');
            progressBar.style.width = '50%';

            // 开始倒计时
            startCountdown();
        });

        // 验证码表单提交
        codeForm.addEventListener('submit', function (e) {
            e.preventDefault();
            // 模拟验证成功
            codeForm.classList.add('hidden');
            resetForm.classList.remove('hidden');
            progressBar.style.width = '100%';
        });

        // 重置密码表单提交
        resetForm.addEventListener('submit', function (e) {
            e.preventDefault();
            // 模拟重置成功
            resetForm.classList.add('hidden');
            successMessage.classList.remove('hidden');
        });

        // 返回按钮事件
        backToEmail.addEventListener('click', function () {
            codeForm.classList.add('hidden');
            emailForm.classList.remove('hidden');
            progressBar.style.width = '0%';
        });

        backToCode.addEventListener('click', function () {
            resetForm.classList.add('hidden');
            codeForm.classList.remove('hidden');
            progressBar.style.width = '50%';
        });

        // 重新发送验证码
        resendCode.addEventListener('click', startCountdown);

        // 验证码倒计时
        function startCountdown() {
            let seconds = 59;
            resendCode.disabled = true;
            resendCode.classList.add('opacity-50', 'cursor-not-allowed');

            const countdownInterval = setInterval(() => {
                countdownEl.textContent = `验证码已发送至 ${emailDisplay.textContent}，${seconds}秒后可重新发送`;
                seconds--;

                if (seconds < 0) {
                    clearInterval(countdownInterval);
                    resendCode.disabled = false;
                    resendCode.classList.remove('opacity-50', 'cursor-not-allowed');
                    countdownEl.textContent = `验证码已发送至 ${emailDisplay.textContent}，点击重新发送`;
                }
            }, 1000);
        }

        // 密码可见性切换
        togglePasswordBtns.forEach(btn => {
            btn.addEventListener('click', function () {
                const targetId = this.getAttribute('data-target');
                const targetInput = document.getElementById(targetId);
                const icon = this.querySelector('i');

                if (targetInput.type === 'password') {
                    targetInput.type = 'text';
                    icon.classList.remove('fa-eye-slash');
                    icon.classList.add('fa-eye');
                } else {
                    targetInput.type = 'password';
                    icon.classList.remove('fa-eye');
                    icon.classList.add('fa-eye-slash');
                }
            });
        });

        // 密码匹配验证
        function checkPasswordMatch() {
            if (passwordInputs.new.value && passwordInputs.confirm.value) {
                if (passwordInputs.new.value === passwordInputs.confirm.value) {
                    passwordMatchMsg.textContent = '密码匹配';
                    passwordMatchMsg.classList.add('text-green-600');
                    passwordMatchMsg.classList.remove('text-red-600');
                    return true;
                } else {
                    passwordMatchMsg.textContent = '密码不匹配';
                    passwordMatchMsg.classList.add('text-red-600');
                    passwordMatchMsg.classList.remove('text-green-600');
                    return false;
                }
            } else {
                passwordMatchMsg.textContent = '';
                return false;
            }
        }

        passwordInputs.new.addEventListener('input', checkPasswordMatch);
        passwordInputs.confirm.addEventListener('input', checkPasswordMatch);

        // 导航栏滚动效果
        const header = document.querySelector('header');
        window.addEventListener('scroll', () => {
            if (window.scrollY > 50) {
                header.classList.add('py-2', 'shadow');
                header.classList.remove('py-3', 'shadow-sm');
            } else {
                header.classList.add('py-3', 'shadow-sm');
                header.classList.remove('py-2', 'shadow');
            }
        });
    </script>
</body>

</html>